<template>
    <div>
        <setHeader :title="headerTitle"></setHeader>
        <div class="pagecontent">
            <h3 class="mt-notice" style="color: #e50838 !important; text-align: left !important;">欢迎加入“{{companyName}}”</h3>
            <div class="write_input_box write-label">
                <label for="">您的姓名：</label>
                <input type="text" placeholder="请输入您的姓名" v-model="userInfo.username">
            </div>
            <div class="write_input_box write-label" v-show="showss">
                <label for="">您的职位：</label>
                <input type="text" placeholder="请输入职位名称" v-model="architeName" @mousedown="showPicker">
            </div>
            <div class="write_input_box write-label" v-show="showsss">
                <label for="">您的职位：</label>
                <input type="text" placeholder="请输入职位名称" v-model="architeNames" @click.capture="showCompanyList" @mousedown="showPicker">
            </div>
            <div class="write_input_box write-label">
                <label for="">申请信息：</label>
                <input type="text" placeholder="请输入申请信息" v-model="apply_info">
            </div>
            <div class="btn_big_red primary_add" style="margin-top: 0.9rem;" @click="JoinInfo">
                <button>确认</button>
            </div>
        </div>
        <mt-popup
            v-model="popupVisible"
            position="bottom">
        <ul> 
            <li style="text-align: left;" :style="list.style" v-for="list in UcompanyList" @click="JoinCompany(list.name,list.id)" :key="list.id">{{list.name}}</li>
        </ul>
        </mt-popup>
    </div>
</template>

<script>
import setHeader from '../public/setHeader.vue';
import { MessageBox } from 'mint-ui';

    export default {
        data() {
            return {
                headerTitle: '企业资料',
                UcompanyList:[],
                popupVisible:false,
                showss: '',
                showsss: '',
                architeName: '',
                architeNames: '',
                architeNamea: '',
                access_token:'',
                uid: '',
                userInfo:'',
                company_id: '',
                cp_id:'',
                apply_info:'',
                companyName: '',
                true_name:'',//姓名
                architeId:'',
                admin_name: '',   //管理员姓名
            }
        },
        components: {
            setHeader
        },
        created() {
            let that = this;
            that.userInfo = window.localStorage.getItem('userInfo');
            that.userInfo = JSON.parse(that.userInfo);
            that.uid = that.userInfo.uid;
            that.company_id = that.userInfo.company_id;
            that.access_token = window.localStorage.getItem('access_token');
            that.cp_id = that.$route.query.cp_id;
            //获取当前企业的所有职位信息
            that.getAuthriList();
            that.companyName = that.$route.query.companyName;
            // 手机号码中间四位数据打码
            // console.log('===>',that.userInfo.mobile.replace(that.userInfo.mobile.substr(3,4), '****'));
        },
        methods: {
            //点击选择职业
            showCompanyList:function(){
                this.popupVisible = true;
            },
            JoinCompany:function(name,id){
                console.log(name);
                this.architeNames= name;
                this.architeName = name;
                this.architeId = id;
                this.architeNamea = name;
                // this.userInfo.company_id = id;
                //  console.log('company_id', this.userInfo.company_id);
                this.popupVisible = false;
            },
            showPicker(e){
                e.preventDefault(); //阻止输入法的唤醒
            },
            //获取当前企业的所有职位信息
            getAuthriList:function(){
                let that = this;
                // let company_id = that.userInfo.company_id;
                // console.log('company_id', company_id);
                this.$post(
                    that.$path+'/api.php/company/getCompanyAuthi',{cp_id:that.cp_id,access_token:that.access_token})
                    .then((res) => {
                        console.log('企业职位', res);
                         if(res.code == 200) {
                            let count = res.data.length;
                            if(count == 1){
                                that.showss = true;
                                that.architeName= res.data[0].name;
                                that.company_id = res.data[0].id;
                            }else{
                                that.architeNames= '请点击选择职位';
                                that.showss = false;
                                that.showsss = true;
                                that.UcompanyList = res.data;
                                that.UcompanyList.forEach((element,index) => {
                                    if(element.level == 1) {
                                        that.UcompanyList[index].style = 'padding-left: 0.2rem';
                                    }else if(element.level == 2){
                                        that.UcompanyList[index].style = 'padding-left: 0.6rem';
                                    }else if(element.level == 3){
                                        that.UcompanyList[index].style = 'padding-left: 1rem';
                                    }
                                });
                                console.log('字符',that.showsss);
                                
                            }                        
                         }
                })
            },
            // 加入申请成功
            JoinInfo() {
                let that = this;
                var architeName = that.architeNamea;
                var architeId = that.architeId;
                var applyInfo = that.apply_info;
                var companyName = that.companyName;
                var true_name = that.true_name;
                var architeNames = that.architeNames;
                // if(architeName == undefined){
                //     var architeName = architeNames;
                // }

                var userName = that.userInfo.username;
                var userId = that.uid;
                var access_token = window.localStorage.getItem('access_token');
                // console.log(architeId);return false;
                if(architeName){
                    this.$fetch(this.$path + '/api.php/company/userApplyInCompany', {companyName,architeName,architeId,applyInfo,userId, userName, access_token}).then((response) => {
                        console.log('进来了',response.data.admin_name);
                        if(response.code != 200){
                            // MessageBox('提示', response.msg)
                            that.$openDialog({
                                src: require('../common/images/UI-08.png'),
                                title: '提交失败',
                                message: response.msg,
                                okText: '确定'
                            });
                            return false;
                        }else{
                            that.$openDialog({
                            src: require('../common/images/UI-11.png'),
                            title: '加入申请成功',
                            message: '请等待"' + that.companyName + '"审核',
                            messagemore: '管理员：'+ response.data.admin_name.replace(that.userInfo.mobile.substr(3,4), '****'),
                            okText: '完成',
                            callback (flag) {
                                if(flag) {
                                    that.$router.push({path:'/userCenter'});                              
                                }  
                            }
                            });
                        } 
                    })
                }
            },
        }

    }
</script>

<style>
/* 该企业已存在 */
.mt-notice{
  /* height: 1.1rem ; */
  line-height: 0.66rem ;
  font-size: 0.36rem ;
  padding: 0 0.2rem ;
  font-weight: 500;
  font-family:SourceHanSansCN-Medium;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

</style>